<template>
  <div>
    <el-form ref="listData" :model="listData" label-width="80px" class="demo-ruleForm">
      <!--<el-form :model="form" label-width="80px" ref="form">-->
      <!--==========================================================================================-->
      <el-form-item label="基本信息">1/5</el-form-item>
      <!--==========================================================================================-->
      <div class="box">
        <div class="box_content">
          <el-form-item label="姓名">
            <el-input v-model="listData.student_name" :value="listData.student_name" disabled />
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="性别" prop="sex">
            <el-select :value="listData.sex" placeholder="请选择性别" disabled>
              <el-option label="男" value="1" />
              <el-option label="女" value="2" />
            </el-select>
          </el-form-item>
        </div>
        <!--<div class="box_content">
          <el-form-item label="民族" prop="nation">
            <el-input v-model="listData.phone"></el-input>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="国籍" prop="nationality">
            <el-input v-model="listData.nationality"></el-input>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="出生年月" prop="birthday">
            <el-date-picker type="date" v-model="listData.birthday" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </div>-->
      </div>
      <!--<el-row>
        <el-col :span="4">
          <el-form-item label="姓名">
            <el-input v-model="listData.name" :value="form.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="性别" prop="sex">
            <el-input v-model="listData.sex"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="民族" prop="nation">
            <el-input v-model="listData.phone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="国籍" prop="nationality">
            <el-input v-model="listData.nationality"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="出生年月" prop="birthday">
            <el-date-picker type="date" v-model="listData.birthday" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>-->
      <!--==========================================================================================-->
      <div class="box">
        <!--<div class="box_content">
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="listData.home.phone">
              <template slot="prepend">+86</template>
            </el-input>
          </el-form-item>
        </div>-->
        <div class="box_content">
          <el-form-item label="证件号码" prop="number">
            <el-input v-model="listData.card" class="input-with-select" disabled>
              <el-select slot="prepend" v-model="listData.card_type" placeholder="请选择证件类型" style="width: 90px" disabled>
                <el-option v-for="item in cardType" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-input>
          </el-form-item>
        </div>
      </div>
      <!--<el-row>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="listData.phone">
              <template slot="prepend">+86</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" style="font-weight: bold">
          <el-form-item label="证件号码" prop="number">
            <el-input v-model="form.number" class="input-with-select">
              <el-select v-model="value" slot="prepend" style="width: 90px">
                <el-option label="身份证" value="1"></el-option>
                <el-option label="通行证" value="2"></el-option>
              </el-select>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>-->
      <!--==========================================================================================-->
      <div class="box">
        <div class="box_content">
          <el-form-item label="家长姓名">
            <el-input v-model="listData.home[0].parent_name" disabled />
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="家长称谓">
            <el-select v-model="listData.home[0].relation" placeholder="请选择称谓" disabled>
              <el-option label="爸爸" value="1" />
              <el-option label="妈妈" value="2" />
              <el-option label="爷爷" value="3" />
              <el-option label="奶奶" value="4" />
            </el-select>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="联系电话">
            <el-input v-model="listData.home[0].phone" disabled>
              <template slot="prepend">+86</template>
            </el-input>
          </el-form-item>
        </div>
      </div>
      <!--<div class="box">
        <div class="box_content">
          <el-form-item label="家长姓名">
            <el-input v-model="form.MotherName"></el-input>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="家长称谓">
            <el-input v-model="form.MoM"></el-input>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="联系电话">
            <el-input v-model="form.MotherPhone">
              <template slot="prepend">+86</template>
            </el-input>
          </el-form-item>
        </div>
      </div>-->
      <div class="box">
        <div class="box_content">
          <div style="text-align: center">
            <el-button type="info">添加联系人</el-button>
          </div>
        </div>
      </div>
      <!--==========================================================================================-->
      <el-form-item label="家庭信息">2/5</el-form-item>
      <!--==========================================================================================-->
      <div class="box">
        <div class="box_content">
          <el-form-item label="申请学期">
            <el-select v-model="listData.recruit.semester_id" class="select" disabled>
              <el-option v-for="item in semester" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="申请年级">
            <el-select v-model="listData.recruit.grade" class="select" disabled>
              <el-option v-for="item in grade" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="申请课程">
            <el-select v-model="listData.recruit.course_id" class="select" disabled>
              <el-option v-for="item in course" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="所属校区">
            <el-select v-model="listData.recruit.school_id" class="select" disabled>
              <el-option v-for="item in school" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </div>
        <div class="box_content" />
      </div>
      <!--==========================================================================================-->
      <div class="box">
        <div class="box_content">
          <el-form-item label="招生来源">
            <el-select v-model="listData.recruit.way" class="select" disabled>
              <el-option v-for="item in channel" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="推荐人">
            <el-input v-model="listData.recruit.referrer" disabled />
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="主跟进人">
            <el-input v-model="listData.recruit.teacher_id" disabled />
          </el-form-item>
        </div>
        <div class="box_content">
          <el-form-item label="副跟进人">
            <el-select v-model="listData.recruit.deputy_teacher_id" class="select" disabled>
              <el-option v-for="item in teacher2" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </div>
        <div class="box_content">
          <div class="block" style="text-align: left">
            <span>意向度</span><el-rate />
          </div>
        </div>
      </div>
      <!--==========================================================================================-->
      <el-form-item label="招生信息">3/5</el-form-item>
      <!--==========================================================================================-->
      <div class="box">
        <div class="box_content2">
          <el-form-item label="曾读学校">
            <el-select v-model="listData.course.school" class="select" disabled>
              <el-option v-for="item in school" :key="item.value" :label="item.label" :value="item.label" />
            </el-select>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="语文">
            <el-input v-model="listData.course.Chinese" disabled />
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="数学">
            <el-input v-model="listData.course.Mathematics" disabled />
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="英语">
            <el-input v-model="listData.course.English" disabled />
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="物理">
            <el-input v-model="listData.course.Physics" disabled />
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="化学">
            <el-input v-model="listData.course.Chemistry" disabled />
          </el-form-item>
        </div>
      </div>
      <!--==========================================================================================-->
      <div class="box">
        <div class="box_content2">
          <el-form-item label="曾读年级">
            <el-select v-model="listData.course.grade" class="select" disabled>
              <el-option v-for="item in grade" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="历史">
            <el-input v-model="listData.course.History" disabled />
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="地理">
            <el-input v-model="listData.course.Geography" disabled />
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="政治">
            <el-input v-model="listData.course.Politics" disabled />
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="生物">
            <el-input v-model="listData.course.Biology" disabled />
          </el-form-item>
        </div>
        <div class="box_content2">
          <el-form-item label="信息科技">
            <el-input v-model="listData.course.computer" disabled />
          </el-form-item>
        </div>
      </div>
      <!--==========================================================================================-->
      <el-form-item label="学业信息">4/5</el-form-item>
      <!--==========================================================================================-->
      <el-row>
        <el-col :span="4">
          <el-form-item label="户籍地址" prop="province">
            <el-cascader
              ref="cascaderCity"
              v-model="realname"
              :value="cityArr"
              style="width: 300px"
              :options="options"
              disabled
              :props="{
                value: 'id',
                label: 'name',
                ...props
              }"
              @change="handleChange"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <!--==========================================================================================-->
      <el-row>
        <el-col :span="24">
          <el-form-item label="地址" prop="DetailedAddress">
            <el-input v-model="listData.address" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <!--==========================================================================================-->
      <el-row>
        <el-form-item label="备注">
          <el-input v-model="listData.remark" type="textarea" maxlength="1000" show-word-limit disabled />
        </el-form-item>
      </el-row>
      <!--==========================================================================================-->
      <el-form-item label="跟进记录">5/5</el-form-item>
      <div v-for="(item,index) in listData.follow" :key="index" style="font-weight: bold">
        <el-row class="selectFont">
          <el-col :span="4">
            <div>2020-08-05 15:29</div>
          </el-col>
          <el-col :span="4">
            <div v-if="item.communication==1">网上</div>
            <div v-if="item.communication==2">柜台</div>
            <div v-if="item.communication==3">电话沟通</div>
          </el-col>
          <el-col :span="4">
            <div>跟进人：{{ userName }}</div>
          </el-col>
        </el-row>
        <el-row class="selectFont">
          <el-col :span="6">
            <div>{{ item.content }}</div>
          </el-col>
        </el-row>
        <el-row class="selectFont">
          <el-col :span="6">
            <div>{{ item.next_time }}</div>
          </el-col>
        </el-row>
        <hr>
      </div>
      <!--==========================================================================================-->
    </el-form>
    <!--==========================================================================================-->
  </div>
</template>

<script>
import addressData from '@/components/CascaderCity/addressData.json'
import store from '../../../store'
export default {
    name: 'SelectStudent',
    /* 城市级联*/
    props: {
        listData: {
            type: Array,
            default: () => []
        },
        /**
         * 默认区域传入格式:
         * 非多选(props.multiple = false): 北京市/北京市/东城区
         * 多选(props.multiple = true): 北京市/北京市/东城区,广东省/广州市/天河区
         */
        value: {
            type: String,
            default: ''
        },
        /**
         * 默认是regionData
         * regionData(省市区) provinceAndCityData(省市)
         */
        optionType: {
            type: String,
            default: 'regionData',
            validator: function(value) {
                return ['regionData', 'provinceAndCityData'].indexOf(value) !== -1 // 这个值必须匹配下列字符串中的一个
            }
        },
        /**
         * 是否需要开启全国
         */
        isAddAll: {
            type: Boolean,
            default: false
        },
        placeholder: {
            type: String,
            default: ''
        },
        props: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    data() {
        return {
            userName: store.getters.name,
            disables: 'disabled',
            realname: '',
            /* realname:[130000, 130200, 130204],*/
            /* realname:['120000 / 120100 / 120103'],*/
            /* 弹出框属性*/
            NewStudentFile: false,
            /* 城市级联*/
            cityArr: [],
            options: [],
            isChange: false,
            form: {
                name: '', /* 姓名*/
                sex: '', /* 性别*/
                nation: '', /* 民族*/
                nationality: '', /* 国籍*/
                birthday: '', /* 出生年月日*/
                phone: '', /* 联系电话*/
                number: '', /* 身份证号码*/
                recommend: '', /* 推荐人*/
                teacher: '', /* 主跟进人*/
                DaD: '爸爸', /* 父亲称谓*/
                MoM: '妈妈', /* 母亲称谓*/
                FatherName: '', /* 父亲名字*/
                MotherName: '', /* 母亲名字*/
                FatherPhone: '', /* 爸爸电话*/
                MotherPhone: '', /* 妈妈电话*/
                Chinese: '', /* 语文*/
                Math: '', /* 数学*/
                English: '', /* 英语*/
                Physics: '', /* 物理*/
                Chemistry: '', /* 化学*/
                History: '', /* 历史*/
                Geography: '', /* 地理*/
                Politics: '', /* 政治*/
                Biology: '', /* 生物*/
                Technology: '', /* 信息科技*/
                DetailedAddress: '', /* 详细地址*/
                textarea: '', /* 备注*/
                SelectTeacher: '',
                province: []
            },
            SelectSemester: '',
            SelectGrade: '',
            SelectCourse: '',
            SelectSchool: '',
            SelectTeacher: '',
            SelectChannel: '',
            SelectTeacher2: '',
            SelectSchooling: '',
            SelectGradeing: '',
            province: [],
            city: '',
            area: '',
            /* 证件*/
            cardType: [{
                value: 1,
                label: '身份证'
            }, {
                value: 2,
                label: '军官证'
            }],
            /* 学期*/
            semester: [{
                value: 1,
                label: '第一学期'
            }, {
                value: 2,
                label: '第二学期'
            }],
            /* 曾读学校*/
            school: [{
                value: 1,
                label: '一小'
            }, {
                value: 2,
                label: '二小'
            }],
            /* 招生来源*/
            channel: [{
                value: 1,
                label: '网上'
            }, {
                value: 2,
                label: '专台'
            }],
            /* 年级*/
            grade: [{
                value: 1,
                label: '一年级'
            }, {
                value: 2,
                label: '二年级'
            }],
            /* 课程*/
            course: [{
                value: 1,
                label: '语文'
            }, {
                value: 2,
                label: '英语'
            }, {
                value: 3,
                label: '数学'
            }],
            /* 副跟进人*/
            teacher2: [{
                value: 1,
                label: '陈老师'
            }, {
                value: 2,
                label: '李老师'
            }]
        }
    },
    /* 城市级联*/
    watch: {
        /* 监听listData*/
        listData: {
            handler(res) {
                this.realname = [res.province, res.city, res.area]
                console.log(res)
            },
            // 代表在wacth里声明了listData这个方法之后立即先去执行handler方法
            immediate: true,
            deep: true // 代表是否深度监听
        },
        value(val) {
            if (this.isChange) {
                this.isChange = false
            } else {
                this.setDefaultCity()
                const panel = this.$refs.cascaderCity.$refs.panel
                panel.clearCheckedNodes() // 清空级联选择器选中状态
                panel.activePath = [] // 清除高亮
            }
        }
    },
    /* 城市级联*/
    created() {
        this.listData.sex = this.listData.sex.toString()
        this.listData.home[0].relation = this.listData.home[0].relation.toString()
        this.setDefaultCity()
        this.init()

        /* this.are=Object.assign([],[this.c1,this.c2,this.c3])*/
        console.log('============================')
        /* console.log(typeof this.provinceNum)*/
        console.log('============================')
    },
    /* 城市级联*/
    methods: {
        /* 提交*/
        submitForm(formName) {
            /* this.NewStudentFile = false*/
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!')
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        /* 重置*/
        resetForm(formName) {
            this.$refs[formName].resetFields()
        },
        /**
         * 初始化数据已选的数据
         */
        setDefaultCity() {
            // 判断是否有默认区域再判断是否开启多选
            const value = JSON.parse(JSON.stringify(this.value))
            let data = []
            if (value !== '' && typeof value === 'string') {
                if (this.props.multiple) {
                    data = value.split(',').map(item => {
                        return this.handleDefaultRegion(item)
                    })
                } else {
                    data = this.handleDefaultRegion(value)
                }
            }
            this.cityArr = data
        },
        /**
         * 字符串拆分出数组
         */
        handleDefaultRegion(value) {
            return value.split('/')
        },
        /**
         * 将数组拼接回字符串
         */
        handleRegionStr(value) {
            let str = ''
            value.forEach(item => {
                str += item + '/'
            })
            return str.slice(0, str.length - 1)
        },
        /**
         * 初始化省市区数据
         */
        init() {
            const cityData = JSON.parse(JSON.stringify(addressData)) // 避免JSON源被改变
            if (this.isAddAll) {
                cityData.unshift({ id: 0, name: '全国' }) // 插入全国选项
            }
            switch (this.optionType) {
                case 'regionData': // 省市区
                    this.options = cityData
                    break
                case 'provinceAndCityData': // 省市
                    this.options = cityData.map(item => {
                        if (item.children) {
                            item.children.map(item1 => {
                                item1.children = null // 删除一个最后个区
                                return item1
                            })
                        }
                        return item
                    })
                    break
                default:
                    console.error('请选择正确的optionType！')
                    break
            }
        },
        handleChange(event) {
            this.$emit('change', event)
            this.cityArr = event
            let str = ''
            if (this.props.multiple) { // 多选
                event.forEach(item => {
                    str += this.handleRegionStr(item) + ','
                })
                str = str.slice(0, str.length - 1)
            } else {
                str = this.handleRegionStr(event)
            }
            this.isChange = true
            this.$emit('input', str)
            console.log('选中:', event)
        }
    }
}
</script>

<style scoped>
  .selectFont{
    font-size: 15px;
  }
  .box{
    width: 100%;
    display: flex;
    flex-direction: row;
    /*//两侧对齐*/
    justify-content:space-between;
    /*//自动换行*/
    flex-wrap: wrap;
    /*//清除上下行的中间空隙*/
    align-content: flex-start;
  }
  .box_content{
    flex: 30 0 250px;
  }
  .box_content2{
    flex: 30 0 200px;
  }
  /*//解决最后一行的问题*/
  .box:after{
    content: '';
    width: 30%;
  }
</style>
